<template>
    <div>
        <hr>
        <h3>在setup中批量导入</h3>
        <template v-for="item in arr" :key="item.id">
            <component :is="layouts[item.name]"></component>
        </template>

    </div>
</template>

<script setup>
import { markRaw, ref, defineAsyncComponent } from 'vue'
// vite写法
// const modules = import.meta.glob('@/components/BatchCom/*.vue');
let layouts = ref({})
const arr = [
    {
        id: 'a',
        name: 'BaseButton'
    },
    {
        id: 'b',
        name: 'BaseIcon'
    }
]
arr.forEach(item => {
    // vite写法
    // const link = modules[`../../components/BatchCom/${name}.vue`]
    // layouts.value[item.name] = markRaw(defineAsyncComponent(link))
    layouts.value[item.name] = markRaw(defineAsyncComponent(() =>
        import(`@/components/BatchCom/${item.name}.vue`)
    ))
})
</script>

<style lang='less' scoped></style>